import device from './device';

/**
 * 了解Hybrid App核心原理
 * JavaScript 调用 Native的方式
 * 主要有两种：注入API 和 拦截URL SCHEME(类似于url的链接)
 */

let JsBridgePlugin = {};
let uniqueId = null;
// ios独有log
let log = Function;
console.log(log, '<<<---------------  ');
JsBridgePlugin.install = function(Vue, option) {
  Vue.prototype.$jsBridge = {
    registerHandler: function() {
      // console.warn( '没有注册成功' )
    },
    callHandler: function() {
      // console.warn( '没有调用成功' )
    }
  };
  Vue.prototype.$jsBridgeCmd = {
    //key前端自己定义，value的是前端与原生同事共同定义的，一般是字符串类型
    //如果value与定义的不同，会报错，，截图；；
    getAppInfo: 'getAppInfo',
    downloadZip: 'downloadZip', //下载资源
    statusBarAppear: 'statusBarAppear', // 是否开启沉浸式
    statusBarHeight: 'statusBarHeight' // 获取顶部栏高度
  };
  if (device.webView) {
    if (device.isAndroid) {
      androidBridge(function(bridge) {
        bridge.init(function(message, responseCallback) {
          console.log('JS got a message', message);
          let data = {
            'Javascript Responds': 'Wee!'
          };
          responseCallback(data);
        });
        Vue.prototype.$jsBridge = bridge;
        option.ready();
      });
    }
    if (device.isIos) {
      iosBridge(function(bridge) {
        Vue.prototype.$jsBridge = bridge;
        uniqueId = 1;
        log = function(message, data) {
          let log = document.getElementById('log');
          let el = document.createElement('div');
          el.className = 'logLine';
          el.innerHTML =
            uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data);

          if (log.children.length) {
            log.insertBefore(el, log.children[0]);
          } else {
            log.appendChild(el);
          }
        };
        option.ready();
      });
    }
  } else {
    option.ready();
  }
};

// android调用原生的方法封装：
// (前端js与原生Native通信方法外层包裹的固定代码)
function androidBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge);
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback);
  }
  window.WVJBCallbacks = [callback];
  var WVJBIframe = document.createElement('iframe');
  WVJBIframe.style.display = 'none';
  WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function() {
    document.documentElement.removeChild(WVJBIframe);
  }, 0);
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge);
  } else {
    document.addEventListener(
      'WebViewJavascriptBridgeReady',
      function() {
        callback(window.WebViewJavascriptBridge);
      },
      false
    );
  }
}
// ios调用原生的方法封装：
function iosBridge(callback) {
  if (window.WebViewJavascriptBridge) {
    return callback(window.WebViewJavascriptBridge);
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback);
  }
  window.WVJBCallbacks = [callback];
  var WVJBIframe = document.createElement('iframe');
  WVJBIframe.style.display = 'none';
  WVJBIframe.src = 'https://__bridge_loaded__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function() {
    document.documentElement.removeChild(WVJBIframe);
  }, 0);
}

export default JsBridgePlugin;
